// 封装请求数据的函数
function getData(method, url) {
    return new Promise(function (resolve) {
        const xhr = new XMLHttpRequest()
        xhr.open(method, url)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.responseText)
            }
        }
}).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});
}
// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    // 缓存DOM元素
    const ul = document.querySelector('.hero');
    // 已在DOMContentLoaded中缓存;
    // 已在DOMContentLoaded中缓存;
    const bottomRadios = document.querySelectorAll('.bottom .radio');

    // 获取数据
    getData('GET', 'http://project.x-zd.net:3001/apis/herolist').then(item => {
    const arrs = JSON.parse(item).data
    const ul = document.querySelector('.hero')
    arrs.reverse()
    // console.log(arrs.reverse());

    // 封装渲染数据的函数
    function setHero(element) {
        const li = document.createElement('li')
        ul.appendChild(li)
        li.innerHTML = `<a href="https://pvp.qq.com/web201605/herodetail/${element.ename}.shtml" target="_blank">
                        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${element.ename}/${element.ename}.jpg" alt="">
                        <span>${element.cname}</span>
                        </a>`
    }
    // 将数组渲染进页面
    arrs.forEach(element => {
        setHero(element)
}).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});

    // 添加点击事件
    // 已在DOMContentLoaded中缓存
    types.addEventListener('click', e => {
        const check = document.querySelector('.nav .types .checked')
        if (e.target.className == 'radio') {
            // 添加搜索栏选中效果
            check.classList.remove('checked')
            e.target.classList.add('checked')
            // 根据英雄属性分类重新渲染
            ul.innerHTML = ''
            arrs.forEach(value => {
                if ((value.hero_type == e.target.dataset.id || value.hero_type2 == e.target.dataset.id) || value.pay_type == e.target.dataset.id) {
                    setHero(value)
                }
        }).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});
            if (e.target.dataset.id == '0') {
                arrs.forEach(element => {
                   setHero(element)
            }).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});
            }
        }
}).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});
    // 添加搜索框事件
    // 已在DOMContentLoaded中缓存
    input.addEventListener('input', e => {
        // 创建一个arr副本,防止改变原数组
        const arrs1 = JSON.parse(item).data
        arrs1.reverse()
        ul.innerHTML = ''
        const check = document.querySelector('.nav .types .checked')
        check.classList.remove('checked')
        bottomRadios[0].classList.add('checked')
        arrs1.forEach(item => {
            if (item.cname.includes(input.value)) {
                item.cname = item.cname.replace(input.value, `<span class="red">${input.value}</span>`)
                setHero(item)
            }
    }).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});
        if (input.value == '') {
            arrs.forEach(element => {
                setHero(element)
        }).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});

        }

}).catch(error => {
    console.error('Failed to load hero data:', error);
    ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
});
});

})).catch(error => {
        console.error('Failed to load hero data:', error);
        ul.innerHTML = '<li style="grid-column: 1 / -1; text-align: center; padding: 20px;">加载英雄数据失败，请稍后重试</li>';
    });
});